<!-- 主题设置模板 -->

<style>
  .product-line-orange {
    border: 2px solid #ff5722;
    padding: 0;
    height: 16px;
    font-size: 10px;
  }

  .product-line-white {
    border: 2px solid #ff5722;
    background-color: transparent;
    padding: 0;
    height: 16px;
    font-size: 11px;
  }

  .product-line-info {
    height: 14px;
    line-height: 14px;
    color: #fff
  }

  .product-line {
    border-radius: 10px;
    /* background-color: #d3b3b3d7; */
    background: linear-gradient(45deg, #b18b77, #bc8989d7);
  }

  .product-line-add {
    border-radius: 10px;
    border: 2px dashed #d3b3b3;
    /* 修改边框为虚线 */
    height: 64px;
    text-align: center;
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
  }

  .product-line-span.left {
    text-align: left;
    display: inline-block;
    width: 49%;
  }

  .product-line-span.right {
    text-align: right;
    display: inline-block;
    width: 49%;
  }

  .product-line-flex {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
  }
</style>

<div class="layui-fluid" style="max-width: 1600px;">

  <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">班级：A班 组号：1 当前时间：第1年1季
          <div class="layui-btn-container" style="line-height: initial;position: absolute;right: 15px;top: 10px;">
            <button type="button" class="layui-btn layui-btn-xs">消息公告</button>
            <button type="button" class="layui-btn layui-btn-xs">市场预测</button>
            <button type="button" class="layui-btn layui-btn-xs">规则说明</button>
            <button type="button" class="layui-btn layui-btn-xs">订单详情</button>

          </div>
        </div>
        <div class="layui-card-body">

          <div class="layui-row">

            <div class="layui-col-md3">
              <div class="layui-btn-container">
                <button type="button" class="layui-btn">按钮一</button>
                <button type="button" class="layui-btn">按钮二</button>
                <button type="button" class="layui-btn">按钮三</button>
              </div>
            </div>
            <div class="layui-col-md9">
              <div class="layui-btn-container">
                <button type="button" class="layui-btn">按钮一</button>
                <button type="button" class="layui-btn">按钮二</button>
                <button type="button" class="layui-btn">按钮三</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-row layui-col-space10">
    <div class="layui-col-lg8 layui-col-md7 layui-col-sm6">

      <div class="layui-row layui-col-space10">

        <div class="layui-col-lg3 layui-col-md6">

          <div class="layui-card">
            <div class="layui-card-header"> <i class="layui-icon layui-icon-app" style="left: 15px;">空地</i> </div>
            <div class="layui-card-body" style="min-height: 410px">

              <table class="layui-table" lay-size="sm" style="background-color: #d3b3b3d7;">
                <colgroup>
                  <col>
                  <col width="80">
                </colgroup>
                <tbody>
                  <tr>
                    <td>超级手工线组</td>
                    <td style="text-align: right;">
                      空闲
                      <span class="layui-badge layui-bg-orange">P1</span>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <span class="layui-badge layui-bg-orange">售</span>
                      <span class="layui-badge layui-bg-green">产</span>
                      <span class="layui-badge layui-bg-cyan">转</span>
                    </td>
                  </tr>
                </tbody>
              </table>

              <table class="layui-table" lay-size="sm" style="background: linear-gradient(45deg, #0f22ce, #4e89d9); ">
                <colgroup>
                  <col>
                  <col>
                  <col width="100">
                </colgroup>
                <tbody>
                  <tr>
                    <td colspan="2">超级手工线</td>
                    <td rowspan="2">

                      <span class="layui-badge layui-bg-orange">橙</span>
                      <span class="layui-badge layui-bg-green">绿</span>
                      <span class="layui-badge layui-bg-cyan">青</span>

                    </td>
                  </tr>
                  <tr>
                    <td>空闲</td>
                    <td>P1</td>
                  </tr>
                </tbody>
              </table>

              <table class="layui-table" lay-size="sm" style="background-color: #d3b3b3d7;">
                <colgroup>
                  <col>
                  <col width="80">
                </colgroup>
                <tbody>
                  <tr>
                    <td>超级手工线组</td>
                    <td style="text-align: right;">
                      在建
                      <span class="layui-badge layui-bg-orange">P1</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-badge layui-bg-orange">投</span>
                    </td>
                    <td style="text-align: right;">
                      <span class="layui-badge"
                        style="border: 2px solid #ff5722; padding: 0 ; font-size: 12px;">&nbsp;&nbsp;</span>
                      <span class="layui-badge"
                        style="border: 2px solid #ff5722;  padding: 0 ; font-size: 12px;">&nbsp;&nbsp;</span>
                      <span class=" layui-badge"
                        style="border: 2px solid #ff5722; background-color: transparent; padding: 0 ; font-size: 10px;">&nbsp;&nbsp;</span>
                      <span class="layui-badge"
                        style="border: 2px solid #ff5722;background-color: transparent; padding: 0 ; font-size: 12px;">&nbsp;&nbsp;</span>

                    </td>
                  </tr>
                </tbody>
              </table>

              <table class=" layui-table" lay-size="sm">
                <colgroup>
                  <col>
                  <col>
                  <col width="100">
                </colgroup>
                <tbody>
                  <tr>
                    <td colspan="2">超级手工线</td>
                    <td rowspan="2">

                      <span class="layui-badge layui-bg-orange">橙</span>
                      <span class="layui-badge layui-bg-green">绿</span>
                      <span class="layui-badge layui-bg-cyan">青</span>

                    </td>
                  </tr>
                  <tr>
                    <td>空闲</td>
                    <td>P1</td>
                  </tr>
                </tbody>
              </table>
              <table class="layui-table" lay-size="sm">
                <colgroup>
                  <col>
                  <col>
                  <col width="100">
                </colgroup>
                <tbody>
                  <tr>
                    <td colspan="2">超级手工线</td>
                    <td rowspan="2">

                      <span class="layui-badge layui-bg-orange">橙</span>
                      <span class="layui-badge layui-bg-green">绿</span>
                      <span class="layui-badge layui-bg-cyan">青</span>

                    </td>
                  </tr>
                  <tr>
                    <td>空闲</td>
                    <td>P1</td>
                  </tr>
                </tbody>
              </table>
              <table class="layui-table" lay-size="sm">
                <colgroup>
                  <col>
                  <col>
                  <col width="100">
                </colgroup>
                <tbody>
                  <tr>
                    <td colspan="2">超级手工线</td>
                    <td rowspan="2">

                      <span class="layui-badge layui-bg-orange">橙</span>
                      <span class="layui-badge layui-bg-green">绿</span>
                      <span class="layui-badge layui-bg-cyan">青</span>

                    </td>
                  </tr>
                  <tr>
                    <td>空闲</td>
                    <td>P1</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
        <div class="layui-col-lg3 layui-col-md6">

          <div class="layui-card">
            <div class="layui-card-header"> <i class="layui-icon layui-icon-app" style="left: 15px;">空地</i> </div>
            <div class="layui-card-body"
              style="min-height: 410px;text-align: center; align-items: center;justify-content: center;display: flex;">

              <a href="#"><i class="layui-icon layui-icon-addition" style="font-size: 54px; color: #1E9FFF;"></i></a>
            </div>
          </div>

        </div>
        <div class="layui-col-lg3 layui-col-md6">

          <div class="layui-card">
            <div class="layui-card-header">

              <i class="layui-icon layui-icon-home" style="left: 15px;">大厂房</i>

              <div class="layui-btn-group" style="line-height: initial;position: absolute;right: 15px;top: 35%;">
                <button type="button" class="layui-btn layui-btn-xs">批量生成</button>
                <button type="button" class="layui-btn layui-btn-xs">批量投产</button>
              </div>
            </div>
            <div class="layui-card-body" style="min-height: 410px">

              <div class="layui-row layui-col-space5">

                <div class="layui-col-md12">
                  <div class="product-line">
                    <div class="product-line-flex">
                      <span>
                        <span class="product-line-info">超级手工线组</span>
                      </span>
                      <span>
                        <span class="product-line-info">空闲</span>
                        <span class="layui-badge layui-bg-orange">P2</span>
                      </span>
                    </div>
                    <div class="product-line-flex">
                      <span>
                        <span class="layui-badge layui-bg-orange">售</span>
                        <span class="layui-badge layui-bg-green">产</span>
                        <span class="layui-badge layui-bg-cyan">转</span>
                      </span>
                      <span>
                        <span class="layui-badge product-line-orange">&nbsp;&nbsp;</span>
                        <span class="layui-badge product-line-orange">&nbsp;&nbsp;</span>
                        <span class=" layui-badge product-line-white">&nbsp;&nbsp;</span>
                        <span class="layui-badge product-line-white">&nbsp;&nbsp;</span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="layui-col-md12">
                  <div class="product-line" style="background: linear-gradient(45deg, #1b2ab4, #2f568d); ">
                    <div class="product-line-flex">
                      <span>
                        <span class="product-line-info">手工线</span>
                      </span>
                      <span>
                        <span class="product-line-info">空闲</span>
                        <span class="layui-badge layui-bg-orange">P2</span>
                      </span>
                    </div>
                    <div class="product-line-flex">
                      <span>
                        <span class="layui-badge layui-bg-orange">售</span>
                        <span class="layui-badge layui-bg-green">产</span>
                        <span class="layui-badge layui-bg-cyan">转</span>
                      </span>
                      <span>
                        <span class="layui-badge product-line-orange">&nbsp;&nbsp;</span>
                        <span class="layui-badge product-line-orange">&nbsp;&nbsp;</span>
                        <span class=" layui-badge product-line-white">&nbsp;&nbsp;</span>
                        <span class="layui-badge product-line-white">&nbsp;&nbsp;</span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="layui-col-md12">
                  <div class="product-line-add">
                    <a href="#" style="padding-top: 15px;"><i class="layui-icon layui-icon-addition"
                        style="font-size: 54px; color: #1E9FFF;"></i>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>

        </div>
        <div class="layui-col-lg3 layui-col-md6">

          <div class="layui-card">
            <div class="layui-card-header"> <i class="layui-icon layui-icon-app" style="left: 15px;">空地</i> </div>
            <div class="layui-card-body" style="min-height: 410px">



            </div>
          </div>

        </div>

      </div>




    </div>
    <div class="layui-col-lg4 layui-col-md5 layui-col-sm6">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon layui-icon-rmb" style="left: 15px;">财务信息</i> <i
                class="layui-icon layui-icon-more" lay-on="e1"></i></div>
            <div class="layui-card-body" style="height: 60px;">

              <div id="cwxx">
              </div>

            </div>
          </div>
        </div>

        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon layui-icon-rmb" style="left: 15px;">研发信息</i> <i
                class="layui-icon layui-icon-more" lay-on="e2"></i></div>
            <div class="layui-card-body" style="height: 90px;overflow: hidden; ">

              <div id="yfxx">
              </div>

            </div>
          </div>
        </div>

        <div class="layui-col-lg6 layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon layui-icon-rmb" style="left: 15px;">库存产品</i> <i
                class="layui-icon layui-icon-template-1" style=" color: #1E9FFF;"></i> </div>
            <div class="layui-card-body">
              <div id="kccp">
              </div>

            </div>
          </div>
        </div>

        <div class="layui-col-lg6 layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon layui-icon-rmb" style="left: 15px;">原材料信息</i>
              <i class="layui-icon layui-icon-template-1" style=" color: #1E9FFF;"></i>
            </div>
            <div class="layui-card-body" style="height: 120px;overflow: hidden; ">
              <div id="yclxx">
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>

    <div id="cbfxTab2">
    </div>

    <div id="cbfxTab3">
    </div>
  </div>

</div>


<script>

  layui.use(['view', 'gameComponent', 'util'], function () {
    var view = layui.view;
    var util = layui.util;
    var $ = layui.$;


    view('cwxx').render("test/vueBase6", { tabIndex: 1 });
    view('yfxx').render("test/vueBase8", { tabIndex: 1 });
    view('kccp').render("test/vueBase9", { tabIndex: 1 });
    view('yclxx').render("test/vueBase10", { tabIndex: 1 });

    util.on({
      e1: function () {
        var cardBody = $(this).closest('.layui-card').find('.layui-card-body');
        var currentHeight = cardBody.height();

        // 如果当前高度是300px，则将高度设置回原始高度
        if (currentHeight === 300) {
          cardBody.animate({
            height: 60
          }, 'slow');
        } else {
          // 如果当前高度不是300px，则改变高度为300px
          cardBody.animate({
            height: 300
          }, 'slow');
        }
      },
      e2: function () {
        var cardBody = $(this).closest('.layui-card').find('.layui-card-body');
        var currentHeight = cardBody.height();

        // 如果当前高度是300px，则将高度设置回原始高度
        if (currentHeight === 460) {
          cardBody.animate({
            height: 90
          }, 'slow');
        } else {
          // 如果当前高度不是300px，则改变高度为300px
          cardBody.animate({
            height: 460
          }, 'slow');
        }
      },
    });
    // 自定义：触发事件的元素属性名、触发事件的方式
  });

</script>